﻿<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>Scrollspy 滚动监听 &middot; BootstrapVue</title>
<!-- Bootstrap 核心CSS -->
<link href="../../../v4/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../../../v4/assets/css/docsearch.min.css" rel="stylesheet">
<link href="../../../v4/assets/css/docs.min.css" rel="stylesheet">
<link href="../../style/bv_path.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<!-- Favicons图标定义 -->
<link data-n-head="ssr" rel="manifest" href="../../manifest.json">
<link data-n-head="ssr" rel="shortcut icon" href="../../style/icons/icon_64.png">
<link data-n-head="ssr" rel="apple-touch-icon" href="../../style/icons/icon_512.png" sizes="512x512">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../">首页</a></li>
      <li class="nav-item"><a class="nav-link" href="index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link " href="../components">组件</a></li>
      <li class="nav-item"><a class="nav-link active" href="../directives">指令</a></li>
      <li class="nav-item"><a class="nav-link " href="../reference">参考</a></li>
      <li class="nav-item"><a class="nav-link " href="https://bootstrap-vue.org/play" target="_blank">体验</a></li>
      <li class="nav-item"><a class="nav-link " href="http://code.z01.com/v4"><i class="zi zi_bold" zico="粗"></i> Boostrap</a></li>
      <li class="nav-item"><a class="nav-link" href="http://ico.z01.com" target="_blank" rel="noopener">zico图标系统</a></li>
      <li class="nav-item"><a class="nav-link" href="http://www.z01.com" target="_blank" rel="noopener">Zoomla!逐浪CMS</a></li>
    </ul>
  </div>
  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="alse"> v2.12.0 </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> 
        <a class="dropdown-item active" href="../../../bootstrap-vue/docs/4.0/">Latest (4.3.x)</a>
        <a class="dropdown-item" href="/Boot/">v3.3.7</a>
        <a class="dropdown-item" href="/Sass/">Sass语言</a>
        <a class="dropdown-item" href="/Emmet/">Emmet语法</a>
        <a class="dropdown-item" href="//www.z01.com/tool/" target="_blank">IIS站长工具</a>
        <a class="dropdown-item" href="//ad.z01.com/" target="_blank">广告源码</a>
        <a class="dropdown-item" href="//v.z01.com/mb/" target="_blank">免费模板</a>
        <a class="dropdown-item" href="//v.z01.com/" target="_blank">H5移动创作</a>
        <a class="dropdown-item" href="//www.z01.com/help/web/3234.shtml" target="_blank">Flexbox布局</a>
		<a class="dropdown-item" href="/boot/font.html" target="_blank">Font Awesome</a>
</div>
    </li>
    <li class="nav-item"> <a class="nav-link p-2" href="//zoomla.github.io/bootstrap4-zhcn-documentation" target="_blank" rel="noopener" aria-label="GitHub">
      <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
        <title>GitHub</title>
        <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/>
      </svg>
      </a> </li>
    <li class="nav-item"> <a class="nav-link p-2" href="http://www.z01.com/blog/ren/3214.shtml" target="_blank" rel="noopener" aria-label="Slack">译者说</a></li>
  </ul>
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <form class="bd-search d-flex align-items-center">
        <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
        <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false">
          <title>Menu</title>
          <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/>
        </svg>
        </button>
      </form>


<nav class="collapse bd-links" id="bd-docs-nav">
<div class=""><a href="../" class="bd-toc-link">首页</a></div>
<div class="bd-toc-item nuxt-link-exact-active "><a href="../../../bootstrap-vue/docs/" class="bd-toc-link  "> 起步 </a>
<ul class="nav bd-sidenav">
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/components/" class="bd-toc-link nuxt-link-exact-active"> 组件 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/index.html" class="nav-link"> 组件目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/alert.html" class="nav-link"> 警告提示框(Alert) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 徽章(Badge) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 面包屑导航(Breadcrumb) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button.html" class="nav-link"> 按钮(Button) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-group.html" class="nav-link"> 按钮组(Button Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-toolbar.html" class="nav-link"> 按钮Toolbar(Button Toolbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/calendar.html" class="nav-link"> 日历组件(Calendar) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/card.html" class="nav-link"> 卡片(Card) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/carousel.html" class="nav-link"> 轮播效果(Carousel) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/collapse.html" class="nav-link"> 折叠面板(Collapse) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/dropdown.html" class="nav-link"> 下拉菜单(Dropdown) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/embed.html" class="nav-link"> 嵌入(Embed) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form.html" class="nav-link"> 表单(Form) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-checkbox.html" class="nav-link"> 表单复选框(Form Checkbox) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-datepicker.html" class="nav-link"> 表单时间选择器(Form Datepicker) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-file.html" class="nav-link"> 文件选择(Form File) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-group.html" class="nav-link"> 表单组合(Form Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-input.html" class="nav-link"> 表单输入框(Form Input) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-radio.html" class="nav-link"> 单选择表单Form Radio </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-select.html" class="nav-link"> 下拉式表单(Form Select) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-spinbutton.html" class="nav-link"> 按钮式表单(Form Spinbuttno) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-tags.html" class="nav-link"> Tags表单选择器(Form Tags) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-textarea.html" class="nav-link"> 文本框(Form Textarea) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-timepicker.html" class="nav-link"> 表单内时间控件(Form Timepicker) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/image.html" class="nav-link"> 图片(Image) </a></li>

<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/input-group.html" class="nav-link"> 输入框(Input Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/jumbotron.html" class="nav-link"> Hero大块屏(Jumbotron) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/layout.html" class="nav-link"> 布局与网络Layout and Grid System </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/link.html" class="nav-link"> 链接(Link)</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/list-group.html" class="nav-link"> 列表组(List group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/media.html" class="nav-link"> 媒体(Media) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/modal.html" class="nav-link"> 弹出模态框(Modal) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/nav.html" class="nav-link"> 导航(Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/navbar.html" class="nav-link"> 导航栏(Navbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination.html" class="nav-link"> 分页(Pagination) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav.html" class="nav-link"> 分页导航(Pagination Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/popover.html" class="nav-link"> 指示备注(Popover) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/progress.html" class="nav-link"> 进度指示器(Progress) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/spinner.html" class="nav-link"> 旋转指示器(Spinner) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/table.html" class="nav-link"> 表格(Table) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tabs.html" class="nav-link"> 选项卡(Tabs) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/time.html" class="nav-link"> 时间组件(Time) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/toast.html" class="nav-link"> 冒泡推送(Toasts) </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/components/tooltip.html" class="nav-link"> tip提示组件(Tooltip) </a></li>
</ul>
</div>
<div class="bd-toc-item active"><a href="../../../bootstrap-vue/docs/directives/" class="bd-toc-link"> 指令 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/index.html" class="nav-link"> 指令目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/hover.html" class="nav-link"> Hover 指令<small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/popover.html" class="nav-link"> Popover 提示备注</a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/directives/scrollspy.html" class="nav-link"> Scrollspy 滚动监听</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/tooltip.html" class="nav-link"> Tooltip 提示指令</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/visible.html" class="nav-link"> Visible 可见性操作<small class="badge text-uppercase badge-success">New</small> </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/icons.html" class="bd-toc-link"> Icons图标</a>
<ul class="nav bd-sidenav">
</ul>
</div>
  
<div class="bd-toc-item"><a class="bd-toc-link" href="../../../bootstrap-vue/docs/reference">参考</a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference" class="nav-link.html"> 参考目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/accessibility.html" class="nav-link">友好访问</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/color-variants.html" class="nav-link">Color颜色变量 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/images.html" class="nav-link"> 组件图像img的src路径解析</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/router-links.html" class="nav-link"> Router路由支持 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/size-props.html" class="nav-link">大小规格</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/spacing-classes.html" class="nav-link">间距处理</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/starter-templates.html" class="nav-link">开始模板</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/theming.html" class="nav-link">主题色彩</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/utility-classes.html" class="nav-link">通用Class类</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/validation.html" class="nav-link">Form表单验证</a></li>
</ul>
</div>
<div class=""><a href="https://bootstrap-vue.org/play" class="bd-toc-link" target="_blank">在线模拟器</a></div>
</nav>
</div>

<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="nav-item toc-entry mb-2"><a target="_self" href="#scrollspy" class="nav-link font-weight-bold"><span>Scrollspy 滚动监听</span></a></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#how-it-works" class="nav-link"><span>运行原理</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#example-using-navs" class="nav-link"><span>使用导航的示例</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#example-using-nested-navs" class="nav-link"><span>使用嵌套导航的示例</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#example-using-list-group" class="nav-link"><span>使用列表组的示例</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#using-scrollspy-on-components-with-the-to-prop" class="nav-link"><span>在带有 prop在组件上使用scrollspy</span></a> </li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#directive-syntax-and-usage" class="nav-link"><span>指令语法和用法</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#config-object-properties" class="nav-link"><span>配置对象属性</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#config-notes" class="nav-link"><span>配置说明</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#directive-use-examples" class="nav-link"><span>指令使用示例</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#events" class="nav-link"><span>事件用例</span></a> </li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#directive-reference" class="nav-link"><span>指令参考</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-individual-directives" class="nav-link"><span>导入单个指令</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-as-a-plugin" class="nav-link"><span>导入为Vue.js插件</span></a></li>
</ul>
</li>
</ul>
</div>

<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">

<nav data-v-aafc4aea="" aria-label="Breadcrumbs" class="float-left mt-2 mb-0 mb-lg-2">
<ol data-v-aafc4aea="" class="breadcrumb d-inline-flex bg-transparent px-2 py-1 my-0">
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../" class="nuxt-link-active" target="_self">首页</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs" class="nuxt-link-active" target="_self">中文手册</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs/directives/" class="nuxt-link-active" target="_self">指令</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item active"><span data-v-aafc4aea="" aria-current="location">Scrollspy 滚动监听</span></li>
</ol>
</nav>
<div class="clearfix d-block"></div>
  <h1 class="bd-title" id="content">Scrollspy 滚动监听</h1>
  <p class="bd-lead">根据滚动位置自动更新Bootstrap导航或列表组组件，用于指示可视窗口视口中当前处于活动状态的链接。</p>
  <script type="text/javascript" src="../../../v4/assets/js/pupCMS.js"></script>


<nav class="bd-quick-links mb-3 d-xl-none" style="" data-v-4abf2740="">
<header data-v-4abf2740="">
<button data-v-4abf2740="" type="button" class="btn font-weight-bold btn-outline-secondary btn-sm btn-block collapsed" aria-controls="bd-quick-links-collapse" aria-expanded="false"> Show page table of contents </button>
</header>
<ul data-v-4abf2740="" id="bd-quick-links-collapse" class="collapse" style="display: none;">
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#how-it-works" class=""><span data-v-4abf2740="">How it works</span></a>
<ul data-v-4abf2740="">
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#example-using-navs" class=""><span data-v-4abf2740="">Example using navs</span></a></li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#example-using-nested-navs" class=""><span data-v-4abf2740="">Example using nested navs</span></a></li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#example-using-list-group" class=""><span data-v-4abf2740="">Example using list group</span></a></li>
</ul>
</li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#using-scrollspy-on-components-with-the-to-prop" class=""><span data-v-4abf2740="">Using scrollspy on components with the to prop</span></a> </li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#directive-syntax-and-usage" class=""><span data-v-4abf2740="">Directive syntax and usage</span></a>
<ul data-v-4abf2740="">
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#config-object-properties" class=""><span data-v-4abf2740="">Config object properties</span></a></li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#config-notes" class=""><span data-v-4abf2740="">Config notes</span></a></li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#directive-use-examples" class=""><span data-v-4abf2740="">Directive use examples</span></a></li>
</ul>
</li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#events" class=""><span data-v-4abf2740="">Events</span></a> </li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#directive-reference" class=""><span data-v-4abf2740="">Directive reference</span></a>
<ul data-v-4abf2740="">
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#importing-individual-directives" class=""><span data-v-4abf2740="">Importing individual directives</span></a></li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#importing-as-a-plugin" class=""><span data-v-4abf2740="">Importing as a Vue.js plugin</span></a></li>
</ul>
</li>
</ul>
</nav>
<h2 id="how-it-works" class="bv-no-focus-ring"><span class="bd-content-title">运行原理<a class="anchorjs-link" href="#how-it-works" aria-labelledby="how-it-works"></a></span></h2>
<p> <code class="text-nowrap" translate="no">v-b-scrollspy</code> 指令对正常运行有一些要求：</p>
<ul>
<li>必须将其应用于包含 <code class="text-nowrap" translate="no">&lt;b-nav&gt;</code> 或 <code class="text-nowrap" translate="no">&lt;b-list-group&gt;</code> 组件的元素/组件，您要在其中指示当前处于活动状态的链接。</li>
<li>Scrollspy 需要 <code class="text-nowrap" translate="no">位置: 相对;</code>相对 在您监视的元素上，通常是 <code class="text-nowrap" translate="no">&lt;body&gt;</code>.</li>
<li>监视除 <code class="text-nowrap" translate="no">&lt;body&gt;</code>以外的元素时, 请确保已 <code class="text-nowrap" translate="no">设置</code> 高度并 <code class="text-nowrap" translate="no">溢出-y: scroll;</code> 应用.</li>
<li>锚点 (<code class="text-nowrap" translate="no">&lt;a&gt;</code>, <code class="text-nowrap" translate="no">&lt;b-nav-item&gt;</code>, <code class="text-nowrap" translate="no">&lt;b-dropdown-item&gt;</code>, <code class="text-nowrap" translate="no">&lt;b-list-group-item&gt;</code>) 是必需的，并且必须具有指向的 <code class="text-nowrap" translate="no">href</code> (通过 <code class="text-nowrap" translate="no">href</code> 或 <code class="text-nowrap" translate="no"></code> props) 到您正在监视的容器中具有该 <code class="text-nowrap" translate="no">id</code> 的元素. 使用 <code class="text-nowrap" translate="no"></code> prop时, 要么将 <code class="text-nowrap" translate="no">路径</code> 设置为已 <code class="text-nowrap" translate="no">#id-of-element</code>结尾, 要么将位置属性<code class="text-nowrap" translate="no">hash</code> 设置为 <code class="text-nowrap" translate="no">#id-of-element</code>.</li>
</ul>
<p>成功实施后, 您的导航或列表组将进行相应的更新, 根据其关联的 <code class="text-nowrap" translate="no">目标</code> 将活动状态从一项移至下一项.</p>
<h3 id="example-using-navs" class="bv-no-focus-ring"><span class="bd-content-title">使用导航的示例<a class="anchorjs-link" href="#example-using-navs" aria-labelledby="example-using-navs"></a></span></h3>
<p>在 <code class="text-nowrap" translate="no">&lt;b-nav&gt;</code>组件上使用<code class="text-nowrap" translate="no">v-b-scrollspy</code> 监视<code class="text-nowrap" translate="no">&lt;b-card-body&gt;</code>上的滚动. 滚动导航栏下方的区域，并查看活动的班级更改. 下拉项也会突出显示
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-scrollspy-nav">
<div>
<div class="card">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item"><a target="_self" href="#fat" class="nav-link">@fat</a></li>
<li class="nav-item"><a target="_self" href="#mdo" class="nav-link">@mdo</a></li>
<li class="nav-item b-nav-dropdown dropdown" right-alignment="" id="__BVID__663"><a aria-haspopup="true" aria-expanded="false" target="_self" href="#" class="nav-link dropdown-toggle" id="__BVID__663__BV_button_"><span>Dropdown 1,2,3</span></a>
<ul tabindex="-1" class="dropdown-menu" aria-labelledby="__BVID__663__BV_button_">
<li role="presentation"><a role="menuitem" target="_self" href="#one" class="dropdown-item">one</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#two" class="dropdown-item">two</a></li>
<li role="presentation">
<hr role="separator" aria-orientation="horizontal" class="dropdown-divider">
</li>
<li role="presentation"><a role="menuitem" target="_self" href="#three" class="dropdown-item">three</a></li>
</ul>
</li>
<li class="nav-item"><a target="_self" href="#pi0" class="nav-link">@pi0</a></li>
</ul>
</div>
<div id="nav-scroller" class="card-body" style="position: relative; height: 300px; overflow-y: scroll;">
<p> Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur
          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
          ipsum commodo tempor sunt in proident. </p>
<h4 id="fat">@fat</h4>
<p> Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur
          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
          ipsum commodo tempor sunt in proident. </p>
<p> Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur
          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
          ipsum commodo tempor sunt in proident. </p>
<p> Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur
          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
          ipsum commodo tempor sunt in proident. </p>
<h4 id="mdo">@mdo</h4>
<p> Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur
          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
          ipsum commodo tempor sunt in proident. </p>
<p> Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur
          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
          ipsum commodo tempor sunt in proident. </p>
<p> Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur
          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
          ipsum commodo tempor sunt in proident. </p>
<h4 id="one">one</h4>
<p> Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur
          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
          ipsum commodo tempor sunt in proident. </p>
<p> Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur
          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
          ipsum commodo tempor sunt in proident. </p>
<h4 id="two">two</h4>
<p> Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur
          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
          ipsum commodo tempor sunt in proident. </p>
<h4 id="three">three</h4>
<p> Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur
          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
          ipsum commodo tempor sunt in proident. </p>
<p> Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur
          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
          ipsum commodo tempor sunt in proident. </p>
<h4 id="pi0">@pi0</h4>
<p> Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur
          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
          ipsum commodo tempor sunt in proident. </p>
<p> Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur
          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
          ipsum commodo tempor sunt in proident. </p>
<p> Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur
          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
          ipsum commodo tempor sunt in proident. </p>
</div>
</div>
</div>
</div>
<div class="bd-code">
<pre class="hljs html p-2 xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">no-body</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-nav</span> <span class="hljs-attr">pills</span> <span class="hljs-attr">card-header</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"header"</span> <span class="hljs-attr">v-b-scrollspy:nav-scroller</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#fat"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"scrollIntoView"</span>&gt;</span>@fat<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#mdo"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"scrollIntoView"</span>&gt;</span>@mdo<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item-dropdown</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"Dropdown 1,2,3"</span> <span class="hljs-attr">right-alignment</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#one"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"scrollIntoView"</span>&gt;</span>one<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#two"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"scrollIntoView"</span>&gt;</span>two<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-divider</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-divider</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#three"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"scrollIntoView"</span>&gt;</span>three<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item-dropdown</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#pi0"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"scrollIntoView"</span>&gt;</span>@pi0<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-card-body</span>
        <span class="hljs-attr">id</span>=<span class="hljs-string">"nav-scroller"</span>
        <span class="hljs-attr">ref</span>=<span class="hljs-string">"content"</span>
        <span class="hljs-attr">style</span>=<span class="hljs-string">"position:relative; height:300px; overflow-y:scroll;"</span>
      &gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>{{ text }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">h4</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"fat"</span>&gt;</span>@fat<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"i in 3"</span>&gt;</span>{{ text }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">h4</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"mdo"</span>&gt;</span>@mdo<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"i in 3"</span>&gt;</span>{{ text }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">h4</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"one"</span>&gt;</span>one<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"i in 2"</span>&gt;</span>{{ text }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">h4</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"two"</span>&gt;</span>two<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>{{ text }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">h4</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"three"</span>&gt;</span>three<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"i in 2"</span>&gt;</span>{{ text }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">h4</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"pi0"</span>&gt;</span>@pi0<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"i in 3"</span>&gt;</span>{{ text }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-body</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    <span class="hljs-attr">methods</span>: {
      <span class="hljs-comment">// Convenience method to scroll a heading into view.</span>
      <span class="hljs-comment">// Not required for scrollspy to work</span>
      scrollIntoView(evt) {
        evt.preventDefault()
        <span class="hljs-keyword">const</span> href = evt.target.getAttribute(<span class="hljs-string">'href'</span>)
        <span class="hljs-keyword">const</span> el = href ? <span class="hljs-built_in">document</span>.querySelector(href) : <span class="hljs-literal">null</span>
        <span class="hljs-keyword">if</span> (el) {
          <span class="hljs-keyword">this</span>.$refs.content.scrollTop = el.offsetTop
        }
      }
    },
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">text</span>: <span class="hljs-string">`
          Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur
          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
          ipsum commodo tempor sunt in proident.
        `</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre>
</div>
<h3 id="example-using-nested-navs" class="bv-no-focus-ring"><span class="bd-content-title">使用嵌套导航的示例<a class="anchorjs-link" href="#example-using-nested-navs" aria-labelledby="example-using-nested-navs"></a></span></h3>
<p>Scrollspy 还可以与嵌套<code class="text-nowrap" translate="no">&lt;b-nav&gt;</code>一起使用. 如果嵌套的 <code class="text-nowrap" translate="no">&lt;b-nav-item&gt;</code> 是活动的, 则其 parent()s 也将是活动的. 滚动导航栏旁边的区域，然后查看活动的班级更改.</p>
<div translate="translate" class="bd-example vue-example vue-example-b-scrollspy-nested">
<div class="container-fluid">
<div class="row">
<div class="col-4">
<nav class="navbar flex-column navbar-light navbar-expand"><a target="_self" href="#" class="navbar-brand">Navbar</a>
<ul class="nav nav-pills flex-column">
<li class="nav-item active"><a target="_self" href="#item-1" class="nav-link active">Item 1</a></li>
<ul class="nav nav-pills flex-column">
<li class="nav-item ml-3 my-1"><a target="_self" href="#item-1-1" class="nav-link">Item 1-1</a></li>
<li class="nav-item ml-3 my-1"><a target="_self" href="#item-1-2" class="nav-link">Item 1-2</a></li>
</ul>
<li class="nav-item"><a target="_self" href="#item-2" class="nav-link">Item 2</a></li>
<li class="nav-item"><a target="_self" href="#item-3" class="nav-link">Item 3</a></li>
<ul class="nav nav-pills flex-column">
<li class="nav-item ml-3 my-1"><a target="_self" href="#item-3-1" class="nav-link">Item 3-1</a></li>
<li class="nav-item ml-3 my-1"><a target="_self" href="#item-3-2" class="nav-link">Item 3-2</a></li>
</ul>
</ul>
</nav>
</div>
<div class="col-8">
<div id="scrollspy-nested" style="position: relative; height: 350px; overflow-y: auto;">
<h4 id="item-1">Item 1</h4>
<p> Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur
          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
          ipsum commodo tempor sunt in proident. </p>
<h5 id="item-1-1">Item 1-1</h5>
<p> Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur
          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
          ipsum commodo tempor sunt in proident. </p>
<h5 id="item-1-2">Item 2-2</h5>
<p> Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur
          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
          ipsum commodo tempor sunt in proident. </p>
<h4 id="item-2">Item 2</h4>
<p> Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur
          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
          ipsum commodo tempor sunt in proident. </p>
<h4 id="item-3">Item 3</h4>
<p> Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur
          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
          ipsum commodo tempor sunt in proident. </p>
<h5 id="item-3-1">Item 3-1</h5>
<p> Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur
          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
          ipsum commodo tempor sunt in proident. </p>
<h5 id="item-3-2">Item 3-2</h5>
<p> Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur
          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
          ipsum commodo tempor sunt in proident. </p>
</div>
</div>
</div>
</div>
</div>
<div class="bd-code">
<pre class="hljs html p-2 xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">fluid</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"4"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-navbar</span> <span class="hljs-attr">v-b-scrollspy:scrollspy-nested</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-column"</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-navbar-brand</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Navbar<span class="hljs-tag">&lt;/<span class="hljs-name">b-navbar-brand</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-nav</span> <span class="hljs-attr">pills</span> <span class="hljs-attr">vertical</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#item-1"</span>&gt;</span>Item 1<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">b-nav</span> <span class="hljs-attr">pills</span> <span class="hljs-attr">vertical</span>&gt;</span>
              <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ml-3 my-1"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#item-1-1"</span>&gt;</span>Item 1-1<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
              <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ml-3 my-1"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#item-1-2"</span>&gt;</span>Item 1-2<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#item-2"</span>&gt;</span>Item 2<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#item-3"</span>&gt;</span>Item 3<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">b-nav</span> <span class="hljs-attr">pills</span> <span class="hljs-attr">vertical</span>&gt;</span>
              <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ml-3 my-1"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#item-3-1"</span>&gt;</span>Item 3-1<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
              <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ml-3 my-1"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#item-3-2"</span>&gt;</span>Item 3-2<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-navbar</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"8"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"scrollspy-nested"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"position:relative; height:350px; overflow-y:auto"</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">h4</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"item-1"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">""</span>&gt;</span>Item 1<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>{{ text }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">h5</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"item-1-1"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">""</span>&gt;</span>Item 1-1<span class="hljs-tag">&lt;/<span class="hljs-name">h5</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>{{ text }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">h5</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"item-1-2"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">""</span>&gt;</span>Item 2-2<span class="hljs-tag">&lt;/<span class="hljs-name">h5</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>{{ text }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">h4</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"item-2"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">""</span>&gt;</span>Item 2<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>{{ text }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">h4</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"item-3"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">""</span>&gt;</span>Item 3<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>{{ text }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">h5</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"item-3-1"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">""</span>&gt;</span>Item 3-1<span class="hljs-tag">&lt;/<span class="hljs-name">h5</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>{{ text }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">h5</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"item-3-2"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">""</span>&gt;</span>Item 3-2<span class="hljs-tag">&lt;/<span class="hljs-name">h5</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>{{ text }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">text</span>: <span class="hljs-string">`
          Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur
          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
          ipsum commodo tempor sunt in proident.
        `</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre>
</div>
<h3 id="example-using-list-group" class="bv-no-focus-ring"><span class="bd-content-title">使用列表组的示例<a class="anchorjs-link" href="#example-using-list-group" aria-labelledby="example-using-list-group"></a></span></h3>
<p>当Scrollspy包含具有本地<code class="text-nowrap" translate="no">href</code> 或 <code class="text-nowrap" translate="no">to</code>的<code class="text-nowrap" translate="no">&lt;b-list-group&gt;</code>时，它可以与 <code class="text-nowrap" translate="no">&lt;b-list-group-item&gt;</code>一起使用. 滚动列表组旁边的区域，并观察活动状态的变化.</p>
<div translate="translate" class="bd-example vue-example vue-example-b-scrollspy-listgroup">
<div class="container-fluid">
<div class="row">
<div class="col-4">
<div class="list-group"><a target="_self" href="#list-item-1" class="list-group-item list-group-item-action active">Item 1</a> <a target="_self" href="#list-item-2" class="list-group-item list-group-item-action">Item2</a> <a target="_self" href="#list-item-3" class="list-group-item list-group-item-action">Item 3</a> <a target="_self" href="#list-item-4" class="list-group-item list-group-item-action">Item 4</a> <a target="_self" href="#list-item-5" class="list-group-item list-group-item-action">Item 5</a></div>
</div>
<div class="col-8">
<div id="listgroup-ex" style="position: relative; overflow-y: auto; height: 300px;">
<h4 id="list-item-1">Item 1</h4>
<p> Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur
          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
          ipsum commodo tempor sunt in proident. </p>
<h4 id="list-item-2">Item 2</h4>
<p> Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur
          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
          ipsum commodo tempor sunt in proident. </p>
<h4 id="list-item-3">Item 3</h4>
<p> Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur
          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
          ipsum commodo tempor sunt in proident. </p>
<h4 id="list-item-4">Item 4</h4>
<p> Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur
          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
          ipsum commodo tempor sunt in proident. </p>
<h4 id="list-item-5">Item 5</h4>
<p> Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur
          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
          ipsum commodo tempor sunt in proident. </p>
</div>
</div>
</div>
</div>
</div>
<div class="bd-code">
<pre class="hljs html p-2 xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">fluid</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"4"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group</span> <span class="hljs-attr">v-b-scrollspy:listgroup-ex</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#list-item-1"</span>&gt;</span>Item 1<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#list-item-2"</span>&gt;</span>Item2<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#list-item-3"</span>&gt;</span>Item 3<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#list-item-4"</span>&gt;</span>Item 4<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#list-item-5"</span>&gt;</span>Item 5<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"8"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"listgroup-ex"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"position:relative; overflow-y:auto; height:300px"</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">h4</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"list-item-1"</span>&gt;</span>Item 1<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>{{ text }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">h4</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"list-item-2"</span>&gt;</span>Item 2<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>{{ text }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">h4</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"list-item-3"</span>&gt;</span>Item 3<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>{{ text }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">h4</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"list-item-4"</span>&gt;</span>Item 4<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>{{ text }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">h4</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"list-item-5"</span>&gt;</span>Item 5<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>{{ text }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">text</span>: <span class="hljs-string">`
          Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur
          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
          ipsum commodo tempor sunt in proident.
        `</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre>
</div>
<h2 id="using-scrollspy-on-components-with-the-to-prop" class="bv-no-focus-ring"><span class="bd-content-title">在带有 <code class="text-nowrap" translate="no"></code> prop在组件上使用scrollspy<a class="anchorjs-link" href="#using-scrollspy-on-components-with-the-to-prop" aria-labelledby="using-scrollspy-on-components-with-the-to-prop"></a></span></h2>
<p>当使用 Vue Router (或 Nuxt.js) 时, 并且您正在使用 <code class="text-nowrap" translate="no">to</code> prop生成链接时,请使用以下方法之一在渲染的链接上生成适当的 <code class="text-nowrap" translate="no">href</code>： </p>
<div class="bd-code">
<pre class="hljs html p-2" translate="no"><span class="hljs-comment">&lt;!-- using a string path --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">to</span>=<span class="hljs-string">"#id-of-element"</span>&gt;</span>link text<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>

<span class="hljs-comment">&lt;!-- using a router `to` location object --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">:to</span>=<span class="hljs-string">"{ hash: '#id-of-element' }"</span>&gt;</span>link text<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span></pre>
</div>
<p>Scrollspy 可同时使用 <code class="text-nowrap" translate="no">历史记录</code> 和 <code class="text-nowrap" translate="no">哈希</code>路由模式 ，只要生成的URL以 <code class="text-nowrap" translate="no">#id-of-element</code>结尾即可.</p>
<h2 id="directive-syntax-and-usage" class="bv-no-focus-ring"><span class="bd-content-title">指令语法和用法<a class="anchorjs-link" href="#directive-syntax-and-usage" aria-labelledby="directive-syntax-and-usage"></a></span></h2>
<div class="bd-code">
<pre class="hljs  p-2" translate="no">v-b-scrollspy:arg.mod1.mod2="option"</pre>
</div>
<p>哪里:</p>
<ul>
<li><code class="text-nowrap" translate="no">arg</code> 是要监视滚动的元素的 ID (减去 <code class="text-nowrap" translate="no">#</code>) .可选 (默认为 <code class="text-nowrap" translate="no">body</code>. 可以被选项 <code class="text-nowrap" translate="no">覆盖</code>)</li>
<li><code class="text-nowrap" translate="no">mod1</code> 和 <code class="text-nowrap" translate="no">mod2</code> 可以是<code class="text-nowrap" translate="no"></code>移偏号或字符串 <code class="text-nowrap" translate="no">方法</code> (请参见下面的配置对象). 修饰符的顺序并不重要. 两者都是可选的</li>
<li><code class="text-nowrap" translate="no">option</code> 可以是标识要监视 <code class="text-nowrap" translate="no">滚动的</code> 元素的字符串, 数字<code class="text-nowrap" translate="no">偏移量</code>或配置对象(请参见下文). 可选在</li>
</ul>
<p><strong>注意:</strong> 与本机 Bootstrap v4 相比. 在 <strong>BootstrapVue中</strong> 将 <code class="text-nowrap" translate="no">v-b-scrollspy</code> 伪指令应用于具有要激活的链接的目标元素,
 而arg 或 option 指定要监视 (间谍)滚动在元素.</p>
<p>指令a可以应用于任何包含 <code class="text-nowrap" translate="no">&lt;nav-item&gt;</code>, <code class="text-nowrap" translate="no">&lt;b-dropdown-item&gt;</code>, <code class="text-nowrap" translate="no">&lt;b-list-group-item&gt;</code> (或带有适当类的 <code class="text-nowrap" translate="no">&lt;a&gt;</code> 标签), 的包含元素或组件 因为它们已经呈现了 <code class="text-nowrap" translate="no">href</code> 属性，该属性指向滚动元素中具有相应 <code class="text-nowrap" translate="no">id</code>的元素.</p>
<h3 id="config-object-properties" class="bv-no-focus-ring"><span class="bd-content-title">配置对象属性<a class="anchorjs-link" href="#config-object-properties" aria-labelledby="config-object-properties"></a></span></h3>
<!-- eslint-disable no-unused-vars -->

<div class="bd-code">
<pre class="hljs js p-2" translate="no"><span class="hljs-keyword">const</span> config = {
  <span class="hljs-attr">element</span>: <span class="hljs-string">'body'</span>,
  <span class="hljs-attr">offset</span>: <span class="hljs-number">10</span>,
  <span class="hljs-attr">method</span>: <span class="hljs-string">'auto'</span>,
  <span class="hljs-attr">throttle</span>: <span class="hljs-number">100</span>
}</pre>
</div>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>属性</th>
<th>类型</th>
<th>默认</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="text-nowrap" translate="no">element</code></td>
<td>字符串或引用</td>
<td><code class="text-nowrap" translate="no">'body'</code></td>
<td>要监视滚动的元素. 可以是 ID (<code class="text-nowrap" translate="no">#foo</code>), css 选择器 (<code class="text-nowrap" translate="no">#foo div</code>), 或对元素/组件节点的引用.如果是 CSS 字符串, 则使用第一个匹配元素. 如果使用 ID 则必须以 <code class="text-nowrap" translate="no">#</code>开头.</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">offset</code></td>
<td>数</td>
<td><code class="text-nowrap" translate="no">10</code></td>
<td>在触发活动状态之前，从滚动视口顶部开始的偏移量（以像素为单位）.</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">method</code></td>
<td>串</td>
<td><code class="text-nowrap" translate="no">'auto'</code></td>
<td><code class="text-nowrap" translate="no">position</code> 将计算相对于滚动容器的目标偏移量. <code class="text-nowrap" translate="no">offset</code> 将计算相对于窗口/视口顶部的目标偏移量. <code class="text-nowrap" translate="no">如果</code> 滚动<code class="text-nowrap" translate="no"></code> 元素为 <code class="text-nowrap" translate="no">body</code>, 则auto将选择offset <code class="text-nowrap" translate="no">否则为position</code>.</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">throttle</code></td>
<td>数</td>
<td><code class="text-nowrap" translate="no">100</code></td>
<td>调整大小 <code class="text-nowrap" translate="no">事件</code> 在重新计算偏移之前停止触发的超时（以毫秒为单位）.</td>
</tr>
</tbody>
</table>
</div>
<p>如果参数/修饰符和值（对象或数字）被传递，则该值优先于参数arg和修饰符.</p>
<p>如果任何选项的类型无效，那么会将错误写入控制台.</p>
<h3 id="config-notes" class="bv-no-focus-ring"><span class="bd-content-title">配置说明<a class="anchorjs-link" href="#config-notes" aria-labelledby="config-notes"></a></span></h3>
<ul>
<li>如果没有scroll元素，则假定在<code class="text-nowrap" translate="no">&lt;body&gt;</code>上滚动</li>
<li>如果scroll元素是CSS选择器，则选择第一个找到的元素</li>
<li>如果找不到滚动元素，则ScrollSpy会静默不执行任何操作</li>
</ul>
<p><strong>重要! 需要相对定位</strong> 无论实现方法如何, scrollspy 都需要使用 <code class="text-nowrap" translate="no">position: relative;</code> 在要滚动的元素上.在大多数情况下，这是<body> <code class="text-nowrap" translate="no">&lt;body&gt;</code>.在 <code class="text-nowrap" translate="no">&lt;body&gt;</code>以外的元素上滚动查看时, 请确保已设置 CSS <code class="text-nowrap" translate="no">高度</code> 并 <code class="text-nowrap" translate="no">溢出-y: scroll;</code> 应用.</p>
<h3 id="directive-use-examples" class="bv-no-focus-ring"><span class="bd-content-title">指令使用示例<a class="anchorjs-link" href="#directive-use-examples" aria-labelledby="directive-use-examples"></a></span></h3>
<p>假设 <code class="text-nowrap" translate="no">&lt;body&gt;</code> 是滚动元素，并使用默认偏移量10像素</p>
<div class="bd-code">
<pre class="hljs html p-2" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-nav</span> <span class="hljs-attr">v-b-scrollspy</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#bar"</span>&gt;</span>Foo<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#baz"</span>&gt;</span>Bar<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre>
</div>
<p>Assume <code class="text-nowrap" translate="no">&lt;body&gt;</code> is the scroll element, and use offset of 20 pixels</p>
<div class="bd-code">
<pre class="hljs html p-2" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-nav</span> <span class="hljs-attr">v-b-scrollspy</span>=<span class="hljs-string">"20"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#bar"</span>&gt;</span>Foo<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#baz"</span>&gt;</span>Bar<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre>
</div>
<p>Element with ID <code class="text-nowrap" translate="no">#foo</code> is the scroll element, and use default offset of 10 pixels</p>
<div class="bd-code">
<pre class="hljs html p-2" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-nav</span> <span class="hljs-attr">v-b-scrollspy:foo</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#bar"</span>&gt;</span>Foo<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#baz"</span>&gt;</span>Bar<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre>
</div>
<p>Element <code class="text-nowrap" translate="no">#foo</code> is the scroll element, and use offset of 20 pixels</p>
<div class="bd-code">
<pre class="hljs html p-2" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-nav</span> <span class="hljs-attr">v-b-scrollspy:foo</span>=<span class="hljs-string">"20"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#bar"</span>&gt;</span>Foo<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#baz"</span>&gt;</span>Bar<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre>
</div>
<p>Element <code class="text-nowrap" translate="no">#foo</code> is the scroll element, and use offset of 25 pixels</p>
<div class="bd-code">
<pre class="hljs html p-2" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-nav</span> <span class="hljs-attr">v-b-scrollspy:foo.25</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#bar"</span>&gt;</span>Foo<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#baz"</span>&gt;</span>Bar<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre>
</div>
<p>Element <code class="text-nowrap" translate="no">#foo</code> is the scroll element, and use default offset of 10 pixels (note single quotes around
value)</p>
<div class="bd-code">
<pre class="hljs html p-2" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-nav</span> <span class="hljs-attr">v-b-scrollspy</span>=<span class="hljs-string">"'#foo'"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#bar"</span>&gt;</span>Foo<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#baz"</span>&gt;</span>Bar<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre>
</div>
<p>Pass object as config. <code class="text-nowrap" translate="no">element</code> can be a CSS ID (i.e <code class="text-nowrap" translate="no">#foo</code>), a CSS selector (i.e. <code class="text-nowrap" translate="no">body</code>), or a
node reference</p>
<div class="bd-code">
<pre class="hljs html p-2" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-nav</span> <span class="hljs-attr">v-b-scrollspy</span>=<span class="hljs-string">"{element: '#id', offset: 50}"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#bar"</span>&gt;</span>Foo<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#baz"</span>&gt;</span>Bar<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre>
</div>
<h2 id="events" class="bv-no-focus-ring"><span class="bd-content-title">事件用例<a class="anchorjs-link" href="#events" aria-labelledby="events"></a></span></h2>
<p>每当激活目标时，都会在$ root上发出 <code class="text-nowrap" translate="no">bv:scrollspy::activate</code> 事件<code class="text-nowrap" translate="no"></code> 并以目标在 ID 作为参数 (即 <code class="text-nowrap" translate="no">#bar</code>)</p>
<!-- eslint-disable no-unused-vars -->

<div class="bd-code">
<pre class="hljs js p-2" translate="no"><span class="hljs-keyword">const</span> app = <span class="hljs-keyword">new</span> Vue({
  <span class="hljs-attr">el</span>: <span class="hljs-string">'#app'</span>,
  created() {
    <span class="hljs-keyword">this</span>.$root.$on(<span class="hljs-string">'bv::scrollspy::activate'</span>, <span class="hljs-keyword">this</span>.onActivate)
  },
  <span class="hljs-attr">methods</span>: {
    onActivate(target) {
      <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Received event: "bv::scrollspy::activate" for target '</span>, target)
    }
  }
})</pre>
</div>
<!-- Directive reference section auto generated from directive package.json --> 
</section>
<section class="bd-content bd-component-reference">
<h2 id="directive-reference" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">指令参考<a href="/docs/directives/scrollspy#directive-reference" class="anchorjs-link" aria-labelledby="directive-reference" target="_self"></a></span></h2>
<h3 id="importing-individual-directives" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入单个指令 <a href="/docs/directives/scrollspy#importing-individual-directives" class="anchorjs-link" aria-labelledby="importing-individual-directives" target="_self"></a></span></h3>
<p> 您可以通过以下命名的导出将单个指令导入到您的项目中： </p>
<div class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__643">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">指示</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">命名为出口</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">v-b-scrollspy</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">VBScrollspy</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>例：</strong></p>
<pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { VBScrollspy } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
<span class="hljs-comment">// Note: Vue automatically prefixes the directive name with 'v-'</span>
Vue.directive(<span class="hljs-string">'b-scrollspy'</span>, VBScrollspy)</pre>
</article>
<article class="bd-content">
<h3 id="importing-as-a-plugin" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入为Vue.js插件 <a href="/docs/directives/scrollspy#importing-as-a-plugin" class="anchorjs-link" aria-labelledby="importing-as-a-plugin" target="_self"></a></span></h3>
<p> 该插件包括上面列出的所有单个指令. </p>
<div class="table-responsive-sm">
<table fileds="namedExport,importPath" role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped b-table-caption-top" id="__BVID__653">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">命名为出口</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">VBScrollspyPlugin</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>例：</strong></p>
<pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { VBScrollspyPlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.use(VBScrollspyPlugin)</pre>




</main>
</div>
</div>


<script src="../../../v4/assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../../v4/dist/js/popper.min.js"></script> 
<script src="../../../v4/dist/js/bootstrap.min.js"></script> 
<script src="../../../v4/assets/js/docs.min.js"></script> 
<script src="../../../v4/assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../../../v4/assets/js/docsearch.min.js"></script> 
<script>
  docsearch({
    appId: 'PRR89ISST8',
    apiKey: '95044d57d4d7bb744f322d1f18ed607f',
    indexName: 'z01-bootstrapV4',
    inputSelector: '#search-input',
    handleSelected: function (input, event, suggestion) {
      var url = suggestion.url;
      url = suggestion.isLvl1 ? url.split('#')[0]: url;
      // If it's a title we remove the anchor so it does not jump.
      window.location.href = url;
    },
    transformData: function (hits) {
      return hits.map(function (hit) {
        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
        return hit;
      });
    },
    debug: false // Set debug to true if you want to inspect the dropdown
  });
</script> 
<script>
  Holder.addTheme('gray', {
    bg: '#777',
    fg: 'rgba(255,255,255,.75)',
    font: 'Helvetica',
    fontweight: 'normal'
  });
</script>
</body>
</html>
